<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>Flying Saucer: CSS Formatted Text Support</title>
  <meta name="creator" content="Tim Telcik &lt;tim.telcik@permeance.com.au&gt;" />
  <meta name="keywords" content="test xhtml pdf meta adapter" />
  <meta name="subject" content="CSS Formatted Text Demo Page" />

  <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
  <link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
  <style type="text/css">
    .smallcaps { font-variant: small-caps }
    .f1 { font-size: 130%; }
    .f2 { font-size: 160%; }
    .f3 { font-size: 300%; }
    .f4 { font-family: sans-serif; }
    .f5 { font-family: serif; }
    .f6 { font-family: monospace; }
    .f7 { color: red; }
    .f8 { color: green; }
    .f9 { color: blue; }
    p.left-align {
        text-align: left;
        }
    p.center-align {
        text-align: center;
        }
    p.right-align {
        text-align: right;
        }
    p.just { text-align: justify; }
    .uppercase {
        text-transform: uppercase;
        }
    .lowercase {
        text-transform: lowercase;
        }
    .capitalize {
        text-transform: capitalize;
        }
		.underline { text-decoration: underline; }
    .customfont { font-family: Fuzz; font-size: 18pt; }
  </style>
  </head>
  <body>
    <p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
    <p class="link right-link"><a href="demoNav:forward">Next Page</a></p>

    <p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
    <span id="pagebyline">CSS <span class="customfont">Formatted Text</span> Support</span><br />
    <p><b>Formatted text support includes</b>: formatting text using CSS styling including the many styling properties
    shown below.</p>
    <br />

    <p>You can use <b>bold</b>, <i>italic</i>, <span class="smallcaps">smallcaps</span>,
    <span class="underline">underline</span>, <span class="uppercase">uppercased text</span>,
    <span class="lowercase">lowercased text</span>, and <span class="capitalize">captialized text</span>.</p>

    <p>You can also use

    <span class="f1">different</span> <span class="f2">font</span> <span class="f3">sizes</span>,
    <span class="f4">different</span> <span class="f5">font</span> <span class="f6">families</span>,
    and  <span class="f7">different</span> <span class="f8">text</span> <span class="f9">colors</span>.</p>

    <p>
    You can even use <span class="customfont">a custom font</span> embedded in your application.
    </p>

    <p>We also support alignment such as:</p>

    <p class="left-align">left</p>
    <p class="center-align">center</p>
    <p class="right-align">and right aligned text.</p>
    <p class="just">You can even justify text on a single line (if the line is long enough, and I mean really long)</p>

    <p>and spec-compliant whitespace control such as:</p>

    <pre>    some
    preformatted
        text
    </pre>
  </body>
</html>
